<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<head>
<title>常用标签练习</title>
</head>
<body>
<div class="jianju">
<h2>常用标签练习</h2>
<div id="tb" style="height:auto">
<h3>1.lable标签</h3>
<!-- <label> 标签为 input 元素定义标注（标记）。Label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
 -->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" /></br>
<h3>2.span标签</h3>
<!-- 被 <span> 元素包含的文本，可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。 -->
<p>我的母亲有<span style="color:blue;font-weight:bold">蓝色</span> 的眼睛</p>
<h3>3.table标签</h3>
<!-- 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。rowspan合并行colspa合并列 -->
			<table border="1">
				<tr>
					<td>row 1, cell 1</td>
					<td>row 1, cell 2</td>
				</tr>
				<tr>
					<td>row 2, cell 1</td>
					<td>row 2, cell 2</td>
				</tr>
			</table></br>
			<table border="1">
				<tr>
					<td rowspan="2">row 1, cell 1</td>
					<td>row 1, cell 1</td>
				</tr>
				<tr>
					<td>row 1, cell 1</td>
				</tr>
			</table>
<h3>4.textarea标签</h3></br>
<!-- <textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小 -->
<textarea rows="3" cols="20">	  
我是一个文本框。
</textarea></br>
<h3>5.select标签</h3>
<!-- 可创建单选或多选菜单
		  1) size {int}：设置下拉列表尺寸。默认的为combox样式。
2) multiple {boolean}：是否多项选择,按住Ctrl+左键可进行多选操作。
3) item子项：
① <optgroup>标签：定义选择项的类别，不能被选中。
　　         label {string} 属性：类别展示的名称
　　         title {string} 属性：鼠标移到选择项上去，要展示的信息
② <option>标签：定义可选的项目
　　         vlaue {string} 属性：选择项具体的名称
　　         title {string} 属性：鼠标移到选择项上去，要展示的信息
 -->
 <select id="province" multiple=multiple size="6" >
    		<optgroup label="直辖市"  ></optgroup>
    		<option value="bj" title="北京市" >北京</option>
    		<option value="sh" title="上海市">上海</option>
    		<optgroup label="省市" ></optgroup>
    		<option value="zj" title="浙江省">浙江</option>
    		<option value="fj" title="福建省">福建</option>
</select></br>
<h3>6.input标签</h3>
<!--  作用: <input> 标签规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性-->
<form action="">
<input type=text  value="文本框">text框</br>
<input type=password>password框</br>
<input type=reset>reset按钮重置当前form表单的所有标签到初始化状态</br>
<input type=submit>submit按钮提交表单</br>
<input type=button value="普通按钮">button按钮</br>
<input type=file>
<input type=image src="${pageContext.request.contextPath}/static/images/shensuo_big.png">image图片框</br>
<input type=hidden value="隐藏">hide标签用户看不到内容
</form>
<h3>7.a标签</h3>
<!-- <a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
 -->
 <a href="http://www.baidu.com">访问百度</a></br>
 <h3>8.radio单选按钮标签</h3>
 <form action="" method="get">
您最喜欢水果？<br />
<label><input name="Fruit" type="radio" value="" />苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>
</form>
 <h3>9.checkbox复选按钮标签</h3>
 <form action="" method="get">
您喜欢的水果？<br />
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 </label>
</form>
<h3>10.button标签</h3>
<!-- <button> 标签定义一个按钮
		在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
  		请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。
 -->
 <button type="button" >点我!</button>
<input type="button" value="点我!" />

</body>
</html>